<%--
  Created by IntelliJ IDEA.
  User: bobo
  Date: 2016/10/25
  Time: 15:18
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <head>
        <jsp:include page="../layout/head.jsp">
            <jsp:param name="title" value="上传图片"/>
        </jsp:include>

        <style>
            .form-x {
                padding-left: 50px;;
            }
            .form-group {
                position: relative;

            }
            #fileUpload{
                width: 0;
                height: 0;
                position: absolute;
                top: 0;
                left: 0;
                z-index: -1;
            }
            .file-upload-btn {
                margin-right: 50px;

            }
            .preview-header {
                overflow: hidden;

                padding: 20px 0;


            }
            .w100, .w55 {
                width: 100px;
                height: 100px;
                float: left;
                margin-right: 20px;
                padding: 5px;
                border: 2px solid #ececec;
                border-radius: 3px;
                box-sizing: content-box;
                text-align: center;
                position: relative;
            }



            .w100::after {
                content: '大头像';
                padding: 0;
                position: absolute;
                top: 100%;
                left: 0;
                right: 0;
                margin-top: 0.5em;
            }

            .w55{
                width: 55px;
                height: 55px;

            }

            .w55::after {
                content: '小头像';
                padding: 0;
                position: absolute;
                top: 100%;
                left: 0;
                right: 0;
                margin-top: 0.5em;
            }



            .preview-header img {
                width: inherit;
                height: inherit;
            }


        </style>
</head>
<body>
<%--<div>--%>
    <%--<h1>更新图片</h1>--%>
    <%--<form action="${pageContext.request.contextPath}/admin/photo/upd" method="post" enctype="multipart/form-data">--%>
        <%--<input type="hidden" name="id" value="${photo.id}">--%>
        <%--图片<img src="${photo.img}">--%>
        <%--<input type="file" id="photo" name="fileName"><br>--%>
        <%--<input type="submit" value="提交">--%>
    <%--</form>--%>
<%--</div>--%>
<div class="panel admin-panel">
    <div class="panel-head"><strong><span class="icon-pencil-square-o"></span>上传图片</strong></div>
    <div class="body-content">
        <form class="form-x" action="${pageContext.request.contextPath}/admin/photo/upd" method="post"
              enctype="multipart/form-data">
            <input type="hidden" name="id" value="${photo.id}">
            <div class="form-group">
                <label for="fileUpload" class="file-upload-btn button bg-blue">点击上传图片</label>
                <input type="file" id="fileUpload" name="fileName">
                <button class="button bg-main icon-check-square-o" type="submit"> 提交</button>
            </div>
            <div class="preview-header">
                <div class="w100">
                    <img src="${photo.img}">
                </div>
                <div class="w55">
                    <img src="${photo.img}">
                </div>
            </div>
        </form>
    </div>
</div>
<script>
    $(function(){
        $('#fileUpload').change(function(){
            var file = this.files[0];    //选择上传的文件
            var r = new FileReader();
            r.readAsDataURL(file);    //Base64
            $(r).load(function(){
                $('.w100').html('<img src="'+ this.result +'" alt="" />');
                $('.w55').html('<img src="'+ this.result +'" alt="" />');
            });
        });
    });

</script>

</body>
</html>
